/**
 * SnackBar.js
 *
 * This small component is borrowed from
 * https://codepen.io/wibblymat/pen/avAjq
 */

var createSnackbar = (function () {
  // Any snackbar that is already shown
  var previous = null;

  /*
<div class="paper-snackbar">
  <button class="action">Dismiss</button>
  This is a longer message that won't fit on one line. It is, inevitably, quite a boring thing. Hopefully it is still useful.
</div>
*/

  return function (config) {
    var message = config.message,
      actionText = config.actionText,
      action = config.action,
      duration = config.duration;

    if (previous) {
      previous.dismiss();
    }
    var snackbar = document.createElement("div");
    snackbar.className = "paper-snackbar";
    snackbar.dismiss = function () {
      this.style.opacity = 0;
    };
    var text = document.createTextNode(message);
    snackbar.appendChild(text);
    if (actionText) {
      if (!action) {
        action = snackbar.dismiss.bind(snackbar);
      }
      var actionButton = document.createElement("button");
      actionButton.className = "action";
      actionButton.innerHTML = actionText;
      actionButton.addEventListener("click", action);
      snackbar.appendChild(actionButton);
    }
    setTimeout(
      function () {
        if (previous === this) {
          previous.dismiss();
        }
      }.bind(snackbar),
      duration || 5000
    );

    snackbar.addEventListener(
      "transitionend",
      function (event, elapsed) {
        if (event.propertyName === "opacity" && this.style.opacity == 0) {
          this.parentElement.removeChild(this);
          if (previous === this) {
            previous = null;
          }
        }
      }.bind(snackbar)
    );

    previous = snackbar;
    document.body.appendChild(snackbar);
    // In order for the animations to trigger, I have to force the original style to be computed, and then change it.
    getComputedStyle(snackbar).bottom;
    snackbar.style.bottom = "0px";
    snackbar.style.left = "0px";
    snackbar.style.opacity = 1;
  };
})();
